<template>
    <div>
        <van-cell-group class="wallet-cell">
            <van-cell @click="popupWin(item.id)" :is-link="i!=0" v-for="(item,i) in itemList" :key="i">
                <template #default>
                    <span v-if="i==0">¥</span>
                    <span>{{ item.name }}</span>
                </template>
                <template #title>
                    <span>{{ item.title }}</span>
                </template>
            </van-cell>
        </van-cell-group>

        <van-popup v-model="cashIn" title="充值" :style="{ height: '30%',width:'80%' }">
            <van-form @submit="onCashIn">
                <van-field
                    v-model="card_no"
                    name="card_no"
                    label="银行卡号"
                    placeholder="银行卡号"
                    :rules="[{ validator: cardValid, message: '银行卡号格式错误' }]"
                />
                <van-field
                    v-model="change_money"
                    name="change_money"
                    label="金额"
                    placeholder="金额"
                    :rules="[{ validator: priceValid, message: '金额格式错误' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">确认</van-button>
                </div>
            </van-form>
        </van-popup>

        <van-popup v-model="cashOut" title="提现" :style="{ height: '30%',width:'80%' }">
            <van-form @submit="onCashOut">
                <van-field
                    v-model="card_no"
                    name="card_no"
                    label="银行卡号"
                    placeholder="银行卡号"
                    :rules="[{ validator: cardValid, message: '银行卡号格式错误' }]"
                />
                <van-field
                    v-model="change_money"
                    name="change_money"
                    label="金额"
                    placeholder="金额"
                    :rules="[{ validator: priceValid, message: '金额格式错误' },{validator:cashOutValid,message:'提现金额不应该大于余额!'}]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">确认</van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>

import {getWallet, onCashIn, onCashOut} from "../api/user";

export default {
    name: "Wallet",
    created() {
        this.getWallet()
    },
    data() {
        return {
            itemList: [
                {id: "money", title: "余额", name: "0"},
                {id: "cashIn", title: "充值", name: ""},
                {id: "cashOut", title: "提现", name: ""},
            ],
            cashIn: false,
            cashOut: false,
            money: 0,
            change_money: 0,
            card_no: ""
        }
    },
    methods: {
        async getWallet() {
            let result = await getWallet();
            if (this.utils.resultBool(result)) {
                this.money = result.data.money
                this.itemList[0].name = this.money
            }
        },
        async onCashIn(values) {
            let result = await onCashIn(values);
            this.utils.resultBool(result)
            console.log(result)
            this.cashIn = false
            await this.getWallet()
        },
        async onCashOut(values) {
            let result = await onCashOut(values);
            this.utils.resultBool(result)
            console.log(result)
            this.cashOut = false
            await this.getWallet()
        },
        cardValid(val) {
            return /^[1-9](\d{14}|\d{18})$/.test(val)
        },
        priceValid(val) {
            return /^[1-9][\d]*([.][\d]{0,2})?$/.test(val)
        },
        cashOutValid(val) {
            return val <= this.money
        },
        popupWin(id) {
            console.log("popupWin", id)
            this.$data[id] = true
        }
    }
}
</script>

<style lang="scss" scoped>
.wallet-group {
    display: flex;
    margin-top: 200px;

    .wallet-cell {

    }
}


</style>
